<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咨询记录 - 迈浪心理</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/records.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="layout">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <svg width="160" height="40" viewBox="0 0 160 40">
                        <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                            stroke-width="2" />
                        <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#fff">迈浪心理</text>
                    </svg>
                </div>
                <nav class="nav-menu">
                    <a href="index.html" class="nav-item">
                        <span class="nav-icon">📊</span>
                        <span>工作台</span>
                    </a>
                    <a href="schedule.html" class="nav-item">
                        <span class="nav-icon">📅</span>
                        <span>排班管理</span>
                    </a>
                    <a href="records.html" class="nav-item active">
                        <span class="nav-icon">📝</span>
                        <span>咨询记录</span>
                    </a>
                    <div class="nav-divider"></div>
                    <a href="profile.html" class="nav-item">
                        <span class="nav-icon">⚙️</span>
                        <span>个人设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容区 -->
            <main class="main-content">
                <!-- 搜索和筛选区域 -->
                <div class="filter-section">
                    <div class="status-filter">
                        <select v-model="statusFilter" @change="searchRecords">
                            <option v-for="option in statusOptions" :key="option.value" :value="option.value">
                                {{ option.label }}
                            </option>
                        </select>
                    </div>
                </div>

                <!-- 记录列表 -->
                <div class="records-list" v-if="!loading">
                    <div v-for="record in displayRecords" :key="record.id" class="record-card"
                        @click="viewRecordDetail(record)">
                        <div class="record-header">
                            <span class="client-name">{{ record.clientInfo.name }}</span>
                            <span :class="['status-tag', record.status]">{{ getStatusText(record.status) }}</span>
                        </div>
                        <div class="record-info">
                            <p><strong>咨询时间：</strong>{{ record.date }} {{ record.timeSlot }}</p>
                            <p><strong>咨询类型：</strong>面对面咨询</p>
                        </div>
                        <div class="record-content">
                            <p class="content-preview">{{ record.content }}</p>
                        </div>
                    </div>
                </div>

                <!-- 加载状态 -->
                <div v-if="loading" class="loading-state">
                    <div class="loading-spinner"></div>
                    <p>加载中...</p>
                </div>

                <!-- 记录详情模态框 -->
                <div class="modal" v-if="showDetailModal">
                    <div class="modal-content record-detail">
                        <h3>咨询记录详情</h3>
                        <div class="detail-content">
                            <div class="client-info">
                                <h4>来访者信息</h4>
                                <p><strong>姓名：</strong>{{ selectedRecord.clientInfo.name }}</p>
                                <p><strong>电话：</strong>{{ selectedRecord.clientInfo.phone }}</p>
                                <p><strong>咨询时间：</strong>{{ selectedRecord.date }} {{ selectedRecord.timeSlot }}</p>
                            </div>
                            <div class="consultation-detail">
                                <h4>咨询内容</h4>
                                <p>{{ selectedRecord.content }}</p>
                                <h4>咨询进展</h4>
                                <p>{{ selectedRecord.progress }}</p>
                                <h4>下次计划</h4>
                                <p>{{ selectedRecord.nextPlan }}</p>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="close-btn" @click="closeDetailModal">关闭</button>
                        </div>
                    </div>
                </div>

                <!-- 在记录列表后添加分页组件 -->
                <div class="pagination" v-if="totalPages > 1">
                    <button class="page-btn" :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
                        上一页
                    </button>

                    <button class="page-btn" v-for="page in totalPages" :key="page"
                        :class="{ active: currentPage === page }" @click="changePage(page)">
                        {{ page }}
                    </button>

                    <button class="page-btn" :disabled="currentPage === totalPages"
                        @click="changePage(currentPage + 1)">
                        下一页
                    </button>
                </div>
            </main>
        </div>
    </div>
    <script src="js/records.js"></script>
</body>

</html>